<template>
    <div class="categories">
        <!-- 1.面包屑 -->
        <crumbs-nav :level1="'商品管理'" :level2="'商品分类'"></crumbs-nav>
        <!-- 2.添加按钮 -->
        <el-button 
        type="success" 
        plain  
        @click="addCategorty">添加分类</el-button>
        <!-- 3.0 树形结构 -->
        <template>
            <!-- :columns : 要展示列的信息,此信息需要自己在获取到的数组中去设置 -->
            <dzh-tree-grid
              v-loading="loading"
              :columns="columns"
              :dataSource="categortyDataList">
              <template slot-scope="scope">
                <el-button plain title='修改商品分类' type="primary" size="small" icon="el-icon-edit" @click="handleClickEditName(scope.row)"></el-button>
                <el-button plain title='删除商品分类' type="danger" size="small" icon="el-icon-delete" @click="handleClickDeleteName(scope.row)"></el-button>
              </template> 
            </dzh-tree-grid>
        </template>
        <!-- 4.0 分页器 -->
        <!-- 
            :current-change:初始页
            :page-sizes:页面容量的选项数组
            :page-size:初始页容量
            layout:分页器控件项
            :total:数据总量
         -->
         <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[5, 10, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total">
        </el-pagination>
        <!-- 5.0添加分类的弹窗 -->
        <el-dialog
        title="提示"
        :visible.sync="dialogVisibleaddCategorty"
        width="30%">
            <el-form ref="form" :model="categortyData" label-width="120px">
                <el-form-item label="分类名称">
                    <el-input v-model="categortyData.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级名称">
                    <el-cascader
                    placeholder="默认创建第一级"
                    :props="defaultProps"
                    change-on-select
                    @change="carcaderValChange"
                    :options="cascader"
                    ></el-cascader>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisibleaddCategorty = false">取 消</el-button>
              <el-button type="primary" @click="handleClickaddCategortySend">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 6.0修改分类 -->
         <el-dialog
            title="修改分类信息"
            :visible.sync="dialogVisibleeditCategorty"
            width="50%"
            >
            <el-form :model="editForm" :rules="rules" ref="ruleForm" label-width="100px"  class="demo-ruleForm">
                <el-form-item  label="分类名" prop="cat_name">
                    <el-input style="width:300px"  v-model="editForm.cat_name"></el-input>
                </el-form-item>                
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleeditCategorty = false">取 消</el-button>
                <el-button type="primary" @click="handleClickEditCategory">确 定</el-button>
            </span>
        </el-dialog>

        
    </div>
</template>

<script>
// 导入tree-gire
import DZHTreeGrid from 'dzh-tree-grid'
import crumbsNav from '../../common/crumbsNav'
export default {
    name: 'categories',
    components:{
        crumbsNav,
        "dzh-tree-grid" : DZHTreeGrid 
    },
    data() {
        return {
            //修改分类时的：model
            editForm:{
                cat_id:'0',
                cat_name:''
            },
            defaultProps:{//cascader的映射关系
                label:'cat_name',
                children:'children',
                value:'cat_id'
            },
            //添加分类联动框需要的数据
            cascader:[],
            //添加分类信息填写完成后发送请求需要的数据
            categortyData:{
                cat_pid:'',
                cat_name:"",
                cat_level:''
            },
            selectedOptions3: ['zujian', 'data', 'tag'],
            //控制添加分类弹窗的boolean
            dialogVisibleaddCategorty:false,
            //控制修改分类弹窗的boolean
            dialogVisibleeditCategorty:false,
            //修改分类的验证规则
            rules:{ //验证规则
                cat_name:[
                    { required: true, message: '请输入分类名称', trigger: 'blur' }
                ]
            },
            //loging的boolean
            loading:true,
            //分页器的数据       
            type:3,
            pagenum:1,
            pagesize:10, 
            total:0,         
            // 添加分类的显示Boolean
            dialogVisibleaddCategorty:false,
            //树形结构中需要的数据
            categortyDataList:[],
            columns: [// 需要展示的列
                {
                  label: '分类名称',
                  prop: 'cat_name'
                },
                {
                  label: '级别',
                  prop: 'cat_level_name',
                }
            ],
        }
    },
    created(){
        //实例船舰完毕后执行加载树形结构数据的方法
        this.getCategortyData()
    },
    methods:{
        //删除分类
        handleClickDeleteName(val){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.$axios.delete(`categories/${val.cat_id}`).then(res => {
                if(res.data.meta.status==200){
                    this.$message({
                    type: 'success',
                    message: '删除成功!'
                    })
                    this.getCategortyData()
                }                
            })
        }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        //修改分类发送
        handleClickEditCategory(){
            this.$axios.put(`categories/${this.editForm.cat_id}`,{             
                    id:this.editForm.cat_id,
                    cat_name:this.editForm.cat_name
            }).then(res => {
                this.dialogVisibleeditCategorty = false
                this.$message({
                    message: res.data.meta.msg,
                    type: 'success'
                })
                this.getCategortyData()
            })
        },
        //修改分类名称
        handleClickEditName(val){
            this.editForm.cat_id = val.cat_id
            this.editForm.cat_name = val.cat_name
            this.dialogVisibleeditCategorty = true
        },
        //添加分类发射
        handleClickaddCategortySend(){
            this.dialogVisibleaddCategorty = false
            this.$axios.post(`categories`,this.categortyData)
                        .then(res => {
                            this.categortyData.cat_name = ''
                            this.$refs['form'].resetFields();//为什么清除不了级联里面的内容
                            this.$message({
                                    message: res.data.meta.msg,
                                    type: 'success'
                                });
                            this.getCategortyData()
                        })
        },
        //级联选择器值变化时
        carcaderValChange(val){
            if(val.length==1){
                this.categortyData.cat_pid = val[0]
                this.categortyData.cat_level = 1
            }else if(val.length==2){
                this.categortyData.cat_pid = val[1]
                this.categortyData.cat_level = 2
            } else { // 添加一级分类
                this.addCategoryObj.cat_pid = 0
                this.addCategoryObj.level = 0
            }
        },
        //添加分类请求的数据
        addCategorty(){
            this.dialogVisibleaddCategorty = true
            this.type = 2
            this.$axios.get(`categories`,{
                params:{
                    type:this.type,
                    pagenum:this.pagenum,
                    pagesize:this.pagesize
                }
            }).then(res => {
                this.cascader = res.data.data.result
            })
        },
        // 页面存放数据量改变时调用的方法
        handleSizeChange(val){
            this.pagesize = val
            this.getCategortyData()
        },
        //页数改变时调用的方法
        handleCurrentChange(val){
            this.pagenum = val
            this.getCategortyData()
        },
        // 获取树形结构数据
        getCategortyData(){
            this.$axios.get(`categories`,{
                params:{
                    type:this.type,
                    pagenum:this.pagenum,
                    pagesize:this.pagesize
                }
            }).then(res => {
                this.loading = false
                this.total = res.data.data.total
                this.categortyDataList = res.data.data.result
            })
        }
    }
}
</script>

<style scoped>

</style>
